<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">活动管理 / 次月达标</div>
      <div class="content">
        <div class="relus">
          活动配置说明：首月开通，次月/次N月统计交易量，完成配置的交易量指标给与设定的奖励。
          <img @click="relues" src="../../assets/images/sm.png" />
        </div>
        <div class="jibenInfo">基本信息</div>
        <div class="listGroup">
          <div class="lister">
            <div class="listName">活动名称</div>
            <el-input
              :disabled="disNo"
              @focus="selectInstitution"
              v-model="form.activeName"
              maxlength="30"
              style="width: 300px; margin-right: 40px"
            ></el-input>
          </div>
          <div class="lister">
            <div class="listName">活动品牌</div>

            <el-select
              :disabled="diss"
              v-model="form.Brand"
              @change="pinChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsBrand"
                :key="item.uid"
                :label="item.channelName"
                :value="item.uid"
              ></el-option>
            </el-select>
          </div>
          <div class="lister">
            <div class="listName">活动商品</div>
            <el-select
              multiple
              @change="
                xingType(form.BrandTypeNum);
                $forceUpdate();
              "
              v-model="form.BrandTypeNum"
              value-key="productName"
              placeholder="请选择"
              collapse-tags
            >
              <el-option
                :disabled="diss"
                label="全选"
                value="全选"
                @click.native="selectAll"
              ></el-option>
              <el-option
                :disabled="diss"
                v-for="item in optionsBrandTypeNum"
                :key="item.productUid"
                :label="item.productName"
                :value="item.productUid"
              ></el-option>
            </el-select>
          </div>
          <div class="lister">
            <div class="listName">考核时间</div>
            <div class="block">
              <el-date-picker
                :disabled="disNo"
                class="timers"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions"
                @input="daterangeChange"
                v-model="form.timers"
                style="width: 200px"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
              ></el-date-picker>
            </div>
          </div>
          <div class="lister">
            <div class="listName">奖励方式</div>
            <div class="block">
              <el-select
                v-model="form.settleType"
                clearable
                placeholder="请选择"
                :disabled="disNo"
              >
                <el-option label="日结" value="2"></el-option>
                <el-option label="月结" value="3"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="jibenInfo">规则</div>
        <div class="title_con">
          <b>首月开通，下月起</b>
          <div class="title">
            <div class="title_son1" style="width: 200px">自然月</div>
            <div class="title_son1">考核条件</div>
            <div class="title_son1">奖励金额</div>
            <div class="title_son2" v-if="disNo != true">操作</div>
          </div>
          <div
            class="title"
            v-for="(val, i) in form.nextMonthAmtActiveList"
            :key="i"
          >
            <div class="title_son1" style="width: 200px">
              第{{ i + 1 }}个自然月
            </div>
            <div class="title_son1">
              单个商品累计交易金额<el-input
                :maxlength="9"
                @input="value=>{val.totalAmt=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
                :disabled="disNo"
                v-model="val.totalAmt"
              ></el-input
              ><span>元</span>
            </div>
            <div class="title_son1">
              <el-input
                :maxlength="6"
                 @input="value=>{val.rewardAmt=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')}"
                :disabled="disNo"
                v-model="val.rewardAmt"
              ></el-input
              ><span>元</span>
            </div>
            <div class="title_son2" v-if="disNo != true">
              <div class="add" v-if="i == 0 && type != 2" @click="add">
                + 添加
              </div>
              <div
                @click="del(i)"
                v-if="
                  i == form.nextMonthAmtActiveList.length - 1 &&
                  i != 0 &&
                  type != 2
                "
              >
                <img src="../../assets/images/del.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="jibenInfo">图片配置</div>
        <div style="float: left; width: 96%; margin-left: 20px">
          <p>
            banner图：尺寸345px*140px（图片大小建议不超过1M，请至少上传1张图片，最多可配置3张）
          </p>
          <div style="margin-left: 80px; margin-top: 20px">
            <el-upload
              :class="uploadDisabled"
              :disabled="disNo"
              :action="httpurl + '/api/fileUpload'"
              list-type="picture-card"
              :file-list="form.coverPhotos"
              :limit="3"
              name="file"
              :before-upload="beforeAvatarUpload"
              accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
              :on-preview="handlePictureCardPreview"
              :on-error="handleFail"
              :on-remove="handleRemove"
              :on-success="success"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>
        <div
          style="float: left; width: 96%; margin-left: 20px; margin-top: 20px"
        >
          <p>
            活动详情图：（图片大小建议不超过1M，请至少上传1张图片，最多可配置3张）
          </p>
          <div style="margin-left: 80px; margin-top: 20px">
            <el-upload
              :class="uploadDisableds"
              :disabled="disNo"
              :action="httpurl + '/api/fileUpload'"
              list-type="picture-card"
              :file-list="form.bgPhotos"
              :limit="3"
              name="file"
              accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
              :on-preview="handlePictureCardPreview1"
              :before-upload="beforeAvatarUpload1"
              :on-error="handleFail"
              :on-remove="handleRemove1"
              :on-success="success1"
            >
              <i class="el-icon-plus"></i> </el-upload
            ><el-dialog :visible.sync="dialogVisible1">
              <img width="100%" :src="dialogImageUrl1" alt="" />
            </el-dialog>
          </div>
        </div>
        <div class="foot">
          <el-button v-if="!disNo" type="primary" :loading="loading" @click="submit"
            >完成</el-button
          >
          <el-button v-if="!disNo" @click="result">取消</el-button>
          <el-button v-if="disNo" @click="result">返回</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      title="规则说明"
      :visible.sync="dialogVisible3"
      width="800px"
      :before-close="handleClose"
    >
    <el-row>
      <el-form label-width="100px">
          <el-form-item label="活动说明：">1、首月开通，次月/次N月统计交易量，完成配置的交易量指标给与不同的奖励。活动只对选定品牌的商品进行交易统计。<br/>2、交易自然月的交易额可以自由设置，多条规则的交易额一致或不一致均可，每个月之间没有交集。</el-form-item>
          <el-form-item label="考核时间：">考核时间考核的是商品的开通时间;普通代理参与的活动有效期起止时间。在考核时间内开通的商品参与活动生效。</el-form-item>
          <el-form-item label="奖励规则：">如创建单条规则，则按照完成单条奖励，只奖励一次;<br/>如创建多条规则，完成哪条规则给予相应奖励，可奖励多次。</el-form-item>
          <el-form-item label="奖励方式：">日结：当天完成奖励，第二个自然日入账；<br/>月结：当月完成奖励，下月1日入账。</el-form-item>
        </el-form>
    </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible3 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Littlehow } from "../../assets/js/util";
import axios from "axios";
import { date } from "../../assets/js/commion";
import https from "../../plugins/https";
export default {
  created() {
    this.user = this.$route.query.user;
    // alert(date.isDuringDate('2018/09/17', '2019/09/17'));
    var oemUid = localStorage.getItem("uid");
    https.getAllOfficeLista({})
      .then((res) => {
        console.log(res.data.data);
        let datas = res.data.data;
        datas.map((item) => {
          item.label = item.name;
          item.value = item.uid;
        });
        //
        var format = {
          id: "uid", //菜单编号，作为树形查找id
          root: "", //顶层节点的parentId是root
          pid: "parentUid", //父节点标识字段为parentId
          child: "children", //构造出的树形子节点数组名为children
          sort: { field: "sortNo", direct: 1 },
        }; //排序字段为sortNo，且正序
        console.log(Littlehow.tree.format(datas, format));
        console.log();
        var result = Littlehow.tree.format(datas, format);
        this.options = result;
        console.log(this.options);
      })
      .catch((err) => {
        // alert("洒进来的咖啡机啦");
      });
    https
      .queryChannelNameList({ oemUid: oemUid })
      .then((res) => {
        console.log("品品牌");
        console.log(res.data.data);
        this.optionsBrand = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });

    // this.queryList();
    console.log(this.$route.query.isSshow, this.$route.query.shows);
    this.disNo = this.$route.query.isSshow;
    this.disNos = this.$route.query.isshow;
    this.shows = this.$route.query.shows;
    this.userId = this.$route.query.uid;
    console.log(this.$route.query.uid);
    let uid = this.$route.query.uid;
    if (this.disNo == true) {
      this.uploadDisableds = "disabled";
      this.uploadDisabled = "disabled";
    }
    // console.log(uid);
    // alert(uid);
    // 回显
    if (uid) {
      this.diss = true;
      https
        .queryUpdateActive({ activeUid: uid })
        .then((res) => {
          this.form = res.data.data;
          this.month = this.form.nextMonthAmtActiveList.length;
          // this.form.timers = [];
          this.form.BrandTypeNum = [];
          this.form.Brand = res.data.data.productNoList[0].channelUid;
          // this.form.timers.push(res.data.data.startDate);
          // this.form.timers.push(res.data.data.endDate);
          if (this.form.coverPhotos.length > 2) {
            this.uploadDisabled = "disabled";
          }
          if (this.form.bgPhotos.length > 2) {
            this.uploadDisableds = "disabled";
          }
          var arr = [];
          arr.push(res.data.data.startDate);
          arr.push(res.data.data.endDate);
          this.$set(this.form, "timers", arr);
          this.pinChange(this.form.Brand);
          // this.form.totalAmt = res.data.data.activeBrandOfficeTop[0].totalAmt;

          // // alert(res.data.data.activeBrandOfficeTop.length)
          // this.num = res.data.data.activeBrandOfficeTop.length + 1;
          // // alert(this.form.timers)
          // for (let i = 0; i < res.data.data.productNoList.length; i++) {
          //   // console.log(res.data.productNoList)
          //   // alert(res.data.data.productNoList[i].productUid)
          //   this.form.BrandTypeNum.push(
          //     res.data.data.productNoList[i].productUid
          //   );
          // }
          // alert(this.form.Brand)
          // this.num = res.data.data.activeBrandOfficeTop.length + 1;
          // alert(this.num)
          // this.form.productNoList.channelUid = this.form.Brand;
          https
            .activeBrand({
              brandChannelId: this.form.Brand,
            })

            .then((res1) => {
              this.optionsBrandTypeNum = res1.data.data;
              console.log(this.optionsBrandTypeNum);
              var temps = [];
              //拿到数组里面的来进行赋值操作
              for (let i = 0; i < res.data.data.productNoList.length; i++) {
                // temps.push()
                temps.push(res.data.data.productNoList[i].productUid);
              }
              this.form.BrandTypeNum = temps;
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      this.form.objectType = "0";
    }
  },
  data() {
    return {
      loading:false,
      uploadDisabled: "",
      uploadDisableds: "",
      diss: false,
      isSshow: false,
      dialogVisible3: false,
      httpurl: this.GLOBAL.httpurl,
      dialogVisible: false,
      dialogImageUrl: "",
      dialogVisible1: false,
      dialogImageUrl: "",
      objectType: [
        { label: "个人", value: "0" },
        { label: "团队", value: "1" },
      ],
      options: [],
      user: null,
      disNo: true,
      disNos: false,
      shows: false,
      tj: "2020-03-05 - 2020-06-23",
      rewordDate: null, //奖励发放时间
      userId: "",
      startDate: null,
      endDate: null,
      //选择品牌的id
      brandId: null,
      //提交的数据
      form: {
        settleType: "",
        bgPhotos: [], //	详情图片集合
        coverPhotos: [], //	预览图片集合
        activeUid: "", //活动的id
        activeName: "", //活动的名称
        startDate: "", //活动开始时间
        endDate: "", //活动结束时间
        rewordDate: "", //奖励发放时间
        productNoList: [],
        objectType: "",
        activeUid: this.$route.query.uid ? this.$route.query.uid : "",
        nextMonthAmtActiveList: [{ name: "", month: "1" }],
        officeUid: localStorage.getItem("uid"),
        officeUids: [],
        totalAmt: "", //活动期间内最低交易总额
        // activeDesc: "", //活动描述
        // activeType: "", //活动类型
        // level: null, //排名层级
        rewardAmt: "", //奖励金额
        // productNoList: [], //两个id
        activeBrandOfficeTop: [{ level: "1", rewardAmt: "" }],
        month: "1",
        // mechanism: "", //
        timers: [],
        // timers2: "",
        Brand: "",
        BrandType: "",
        BrandTypeNum: [], //活动商品
        // spType: "", //商品型号
        // minimum: "",
      },
      // 时间选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      month: "1",
      value1: "",
      value2: "",
      //参与活动品牌
      optionsBrand: null,
      Brand: "",
      // 品牌类型
      optionsBrandType: null,
      // BrandType:""
      BrandType: "",
      //   商品型号‘
      optionsBrandTypeNum: null,
      BrandTypeNum: [],
      minimum: "", //入帮交易最低限额
      num: 2,
      rewardGroup: [{ level: "1", rewardAmt: "" }],
      pinpaiId: null,
      xinghaoId: null,
      uid: null,
    };
  },
  methods: {
    handleFail() {
      layer.open({
        content: "图片上传失败，请重新上传",
        skin: "msg",
        time: 1, //1秒后自动关闭
      });
    },
    // 规则
    relues() {
      this.dialogVisible3 = true;
    },
    // 图片上传校验
    beforeAvatarUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      if (!isJPG) {
        // this.$message.error("上传预览图片只能是 jpg、jpeg、png 格式!");
        // return false;
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false
      }else {
        let that = this;
        const isSize = new Promise((resolve, reject) => {
          // const width = 345;
          // const height = 140;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            let name =
              file.name.substring(0, file.name.lastIndexOf(".")) +
              "_" +
              img.width +
              "_" +
              img.height +
              newName;
            file = new File([file], name);
            const valid = this.$commit.ImageRestrictions(
              img.width,
              img.height,
              1
            );
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            // this.$notify({
            //   title: "错误",
            //   message: "图片尺寸限制为345：140，大小不可超过1M",
            //   type: "error",
            // });
            layer.open({
              content: "图片尺寸限制为345：140，大小不可超过1M",
              skin: "msg",
              time: 2,
            });
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    // 图片上传成功
    success(res, file, fileList) {
      // 这里是element的上传地址，对应的name,url,自己打印fileList对照
      this.form.coverPhotos.push({ url: res.data.filePath });
      if (this.form.coverPhotos.length > 2) {
        this.uploadDisabled = "disabled";
      }
    },
    // 图片删除
    handleRemove(res, file, fileList) {
      console.log(res);
      this.uploadDisabled = "";
      for (var i = 0; i < this.form.coverPhotos.length; i++) {
        if (this.form.coverPhotos[i].url == res.url) {
          this.form.coverPhotos.splice(i, 1); //删除下标为i的元素
          return this.form.coverPhotos;
        }
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功
    success1(res, file, fileList) {
      // 这里是element的上传地址，对应的name,url,自己打印fileList对照
      this.form.bgPhotos.push({ url: res.data.filePath });
      if (this.form.bgPhotos.length > 2) {
        this.uploadDisableds = "disabled";
      }
    },
    beforeAvatarUpload1(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        // this.$message.error("上传预览图片只能是 jpg、jpeg、png 格式!");
        // return false;
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
    },
    // 图片删除
    handleRemove1(res, file, fileList) {
      console.log(res);
      this.uploadDisableds = "";
      for (var i = 0; i < this.form.bgPhotos.length; i++) {
        if (this.form.bgPhotos[i].url == res.url) {
          this.form.bgPhotos.splice(i, 1); //删除下标为i的元素
          return this.form.bgPhotos;
        }
      }
    },
    // 图片预览
    handlePictureCardPreview1(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible1 = true;
    },
    // 全选
    selectAll() {
      // alert(JSON.stringify(this.optionsBrandTypeNum))
      //  if (this.form.BrandTypeNum.length < this.optionsBrandTypeNum.length) {
      this.form.BrandTypeNum = [];
      //  alert(this.optionsBrandTypeNum.length)
      // alert(this.form.BrandTypeNum.length)
      // return
      if (this.form.BrandTypeNum.length < this.optionsBrandTypeNum.length) {
        // alert("多选执行")
        if (this.diss != true) {
          var allOption = [];
          for (var i = 0; i < this.optionsBrandTypeNum.length; i++) {
            allOption.push(this.optionsBrandTypeNum[i].productUid);
          }
          this.$set(this.form, "BrandTypeNum", allOption);
          console.log("下面是全选以后后端需要的数据");
          console.log(this.form.BrandTypeNum);
          this.xingType(this.form.BrandTypeNum);
          this.$forceUpdate();
        }
      } else {
        // alert("取消多选执行")
        var allOption = [];
        this.$set(this.form, "BrandTypeNum", allOption);
        this.xingType(this.form.BrandTypeNum);
        this.$forceUpdate();
      }
    },
    // 考核时间校验
    daterangeChange(e) {
      let _this = this;
      console.log(e);
      _this.$nextTick(() => {
        _this.$set(_this.form, "timers", [e[0], e[1]]);
        _this.$forceUpdate();
      });
      this.form.startDate = e[0];
      this.form.endDate = e[1];
    },

    delTag() {
      return false;
    },
    // 查询活动品牌
    queryList() {
      https.activeBrand({})
        .then((res) => {
          console.log("获取活动成果");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    result() {
      this.$router.push({
        path: "activityManagement",
      });
    },

    addRanking() {
      //   this.rewardGroup++
      // alert(this.form.rewardGroup.length)
      if (this.form.activeBrandOfficeTop.length < 20) {
        var obj = { level: this.num, rewardAmt: "" };
        this.form.activeBrandOfficeTop.push(obj);
        this.num++;
        console.log(this.form.activeBrandOfficeTop);
      }
    },
    isDuringDate(beginDateStr, endDate) {
      var curDate = new Date(),
        beginDate = new Date(beginDateStr),
        endDate = new Date(endDate);
      if (this.form.rewordDate > this.form.endDate) {
        return false;
      } else {
        return true;
      }
    },
    // 点击完成
    submit() {
      this.loading=true
      this.form.activeUid = this.$route.query.uid;
      this.form.officeUid = localStorage.getItem("uid");
      if (this.form.activeName == "") {
        return layer.open({
          content: "活动名称不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (this.form.Brand == "") {
        return layer.open({
          content: "活动品牌不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (this.form.timers.length == 0) {
        return layer.open({
          content: "考核时间不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (this.form.settleType == "") {
        return layer.open({
          content: "奖励方式不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      console.log(this.form.productNoList);
      if (this.form.productNoList.length == 0) {
        return layer.open({
          content: "活动商品不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (this.form.coverPhotos.length <= 0) {
        return layer.open({
          content: "至少上传一张banner图",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (this.form.bgPhotos.length <= 0) {
        return layer.open({
          content: "至少上传一张详情图",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      // https.saveNextMonthAmtActive(this.form)
         axios({
        url:'/api/active/saveNextMonthAmtActive',
        data:this.form,
        method:"post",
        timeout:1000*60*2}).then((res) => {
          if (res.data.code == "0000") {
            this.loading=false
            this.$router.push("activityManagement");
          } else {
            this.loading=false
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        });
      // this.$router.push("activityManagement")
    },
    // 添加
    add() {
      this.form.nextMonthAmtActiveList.push({
        month: ++this.month,
        name: "",
      });
    },
    // 删除
    del(num) {
      this.form.nextMonthAmtActiveList.splice(num, 1);
      // console.log(num)
      this.month--;
    },
    //请求品牌类型的接口
    pinChange(val) {
      console.log("id是");
      this.form.BrandTypeNum = [];
      console.log(val);
      //品牌id
      this.brandId = val;
      var ids = this.form.Brand;

      //根据品牌获取商品
      https.activeBrand({ brandChannelId: val })
        .then((res) => {
          console.log("这里");
          console.log(res);
          // this.BrandTypeNum = res.data.data
          this.optionsBrandTypeNum = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    xingType(val) {
      const length = val.length;
      this.form.productNoList = [];
      console.log("下面是val");
      console.log(val);
      for (var i = 0; i < length; i++) {
        this.form.productNoList.push({
          channelUid: this.brandId,
          productUid: val[i],
        });
      }
      console.log("下面是用的那个");
      console.log(this.form.productNoList);
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/deep/ .el-tag__close {
  display: none !important;
}
.wrap {
  width: 96%;
  margin: 0 auto;
}
.listGroup {
  display: flex;
  flex-wrap: wrap;
  /* padding-left: 60px; */
  box-sizing: border-box;
  float: left;
}
.maiLister {
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 20px;
}
.lister {
  width: 450px;
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
  align-items: center;
}
.listers {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
  align-items: center;
}
.listName {
  width: 90px;
  color: #909399;
  text-align: right;
  margin-right: 10px;
}
.listNames {
  width: 162px;
  color: #909399;
  text-align: right;
  margin-right: 10px;
}
/deep/ .lister .el-input__inner {
  width: 300px;
}
/deep/ .lister .el-input {
  width: 300px;
}
/deep/ .lister .el-popper {
  width: 300px;
}
.nums {
  display: inline-block;
  margin-right: 10px;
  color: #909399;
}
.mainTitle {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 20px 0;
  font-weight: 600;
}
/deep/ .timers .el-range-separator {
  width: 20px;
}

.foot {
  margin-top: 50px;
  margin-left: 40%;
  margin-bottom: 20px;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.jibenInfo {
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 18px;
}
.title_son {
  width: 128px;
  float: left;
  line-height: 50px;
}
.title_son1 {
  width: 400px;
  float: left;
  line-height: 50px;
}
.title_son2 {
  width: 150px;
  float: left;
  line-height: 50px;
}
.title_con {
  background: #f9fafc;
  /* width: 100%; */
  min-height: 20px;
  float: left;
  padding: 20px;
  margin: 0 20px;
}
.title {
  display: flex;
  min-height: 50px;
  width: 100%;
  float: left;
  overflow-x: auto;
}

.relus {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  background: #f9f4f7;
  /* color: #fb932b; */
}
.add {
  cursor: pointer;
  color: #409eff;
}
</style>
<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>
